<style lang="less">
.cps-icon-check {
    vertical-align: middle;
    display: inline-block;

    .svg-box {
        display: block;
        border: 2px solid #b2b2b2;
        height: 100%;
        border-radius: 1000px;
        box-sizing: border-box;
        text-align: center;
        line-height: 0;
        &:after {
            display: inline-block;
            content: "";
            width: 0;
            height: 100%;
            vertical-align: middle;
        }
    }

    .svg-gou {
        padding: 3px 0 0 1px;
        vertical-align: middle;
        display: none;
    }

    &[checked] {
        .svg-box {
            background-color: @font-first;
            border-color: transparent;
        }
        .svg-gou {
            display: inline-block;
        }
    }

    &[disabled] {
        .svg-box {
            pointer-events: none;
            opacity: 0.4;
        }
    }
}
</style>



<template>
    <span class="cps-icon-check" :disabled="disabled" :checked="checked" :data-xx="width | px2rem" :style="style">
        <span class="svg-box">
            <svg class="svg-gou" width="60%" viewBox="0 0 19 14">
                <path d="M1.494 6.167L6.362 12 17.494 2" stroke="#FFF" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </span>
    </span>
</template>
    <svg class="cps-icon-check" :disabled="disabled" :checked="checked" :width="width" :height="width" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g>
                <g>
                    <circle class="icon-yuan" fill-opacity=".1" stroke-width="2" cx="14" cy="14" r="13"></circle>
                    <g class="icon-gou" transform="translate(14.131728, 13.037447) rotate(-45.000000) translate(-14.131728, -13.037447) translate(7.131728, 8.537447)">
                        <path d="M1.49412676,0.977823356 L1.49412676,0.977823356 C2.27744387,0.977823356 2.91244785,1.61282734 2.91244785,2.39614445 L2.91244785,7.00082427 C2.91244785,7.78414138 2.27744387,8.41914536 1.49412676,8.41914536 L1.49412676,8.41914536 C0.710809648,8.41914536 0.075805666,7.78414138 0.075805666,7.00082427 L0.075805666,2.39614445 C0.075805666,1.61282734 0.710809648,0.977823356 1.49412676,0.977823356 Z"></path>
                        <path d="M6.8471495,0.248142552 L6.8471495,0.248142552 C7.62015981,0.248142552 8.24680847,0.874791218 8.24680847,1.64780152 L8.24680847,12.3911712 C8.24680847,13.1641816 7.62015981,13.7908302 6.8471495,13.7908302 L6.8471495,13.7908302 C6.0741392,13.7908302 5.44749053,13.1641816 5.44749053,12.3911712 L5.44749053,1.64780152 C5.44749053,0.874791218 6.0741392,0.248142552 6.8471495,0.248142552 Z" transform="translate(6.847150, 7.019486) rotate(-270.000000) translate(-6.847150, -7.019486) "></path>
                    </g>
                </g>
            </g>
        </g>
    </svg>
<script>
export default {
    name: "cps-icon-check",
    props: {
        checked: {
            type: Boolean,
            default: false
        },
        width: {
            type: Number,
            default: 40
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        style () {
            let w = this.width / 100 + "rem"
            return {
                width: w,
                height: w
            }
        }
    }
}
</script>
